.task-container {
    padding: 1rem 1rem 7rem;
    min-height: 100vh;
    box-sizing: border-box;
    background: url("../images/task_bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

    .banner-box {
        position: relative;
        border-radius: 2.4rem;
        overflow: hidden;
        img {
            width: 100%;
        }

        .leader-board {
            position: absolute;
            @include flex-center-center();
            right: 1rem;
            top: 1rem;
            padding: 0 .2rem 0 1rem;
            height: 2.6rem;
            border-radius: 1.3rem;
            text-align: center;
            background-color: #18eaf7;
            color: #505050;

            .name {
                line-height: 2.6rem;
                font-size: 1rem;
            }

            .icon {
                width: 2rem;
                height: 1rem;
                line-height: 0;
            }
        }
    }

    .task-title {
        padding: 1rem;
        @include flex-center-between();

        .name {
            font-size: 2rem;
            font-weight: bold;
        }

        .total {
            @include flex-center-start();

            .num {
                font-size: 2rem;
                color: #18eaf7;
            }

            .unit {
                margin-left: .4rem;
                font-size: 1.4rem;
            }

            .icon {
                margin-left: .4rem;
                width: 1.6rem;
                height: 1.6rem;
                line-height: 0;
            }
        }
    }

    .task-list-box {
        margin-bottom: .4rem;

        .title-box {
            height: 4rem;
            line-height: 4rem;
            padding: 0 1rem;
            border-radius: .8rem;
            background-color: #1f3537;

            .name {
                font-size: 1.2rem;
                color: #18eaf7;
            }
        }

        .task-list {
            margin-top: .2rem;
            border-radius: .8rem;
            background-color: #1f3537;

            .item {
                padding: 0 1rem;

                &:first-child {
                    .item-box {
                        border-top: none;
                    }
                }

                .item-box {
                    @include flex-center-between();
                    border-top: 1px solid #505050;

                    .photo-box {
                        width: 5rem;
                        height: 5rem;
                        @include flex-center-center();

                        img {
                            width: 3.6rem;
                            height: 3.6rem;
                        }
                    }

                    .centre {
                        flex: 1;
                        padding: 0 .4rem;

                        .title {
                            height: 2rem;
                            line-height: 2rem;
                            font-size: 1.2rem;
                            color: #fff;
                        }

                        .min-group {
                            @include flex-center-start();
                            font-size: 1rem;

                            .attr {
                                color: #949494;
                            }

                            .value {
                                margin-left: .4rem;
                                color: #18eaf7;
                            }
                        }

                    }

                    .arrow {
                        width: 8rem;
                        @include flex-center-center();

                        .btn {
                            width: 8rem;
                            padding: 0;
                            height: 3rem;
                            line-height: 3rem;
                            text-align: center;
                            background: url("../images/task_btn_1.png");
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            color: #fff;
                            font-size: 1.2rem;
                            text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
                        }
                    }

                }
            }
        }

        &.task-advanced-list {
            .title-box {
                background-color: #2D1E3B;

                .name {
                    color: #DB36FF;
                }
            }

            .task-list {
                background-color: #2D1E3B;

                .item .item-box .centre .min-group .value {
                    color: #DB36FF;
                }

                .item .item-box .arrow .btn {
                    background: url(../images/task_btn_2.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }
        }

        &.task-special-list {
            .title-box {
                background-color: #322b25;

                .name {
                    color: #f7b032;
                }
            }

            .task-list {
                background-color: #322b25;

                .item .item-box .centre .min-group .value {
                    color: #f7b032;
                }

                .item .item-box .arrow .btn {
                    background: url(../images/task_btn_3.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }
        }

    }


}

.leaderboard-title {
    height: 5rem;
    line-height: 5rem;
    background: url(../images/leaderboard_title.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.leaderboard-list-box {
    li {
        &:nth-of-type(1) .item-box .left-box {
            .sort {
                color: #f9e08b;
            }
            .user-photo::after {
                display: block;
                content: "";
                position: absolute;
                width: 3rem;
                height: 2rem;
                top: -1rem;
                left: 50%;
                margin-left: -1.3rem;
                background: url(../images/ranking1.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        &:nth-of-type(2) .item-box .left-box {
            .sort {
                color: #9ca4b7;
            }
            .user-photo::after {
                display: block;
                content: "";
                position: absolute;
                width: 3rem;
                height: 2rem;
                top: -1rem;
                left: 50%;
                margin-left: -1.3rem;
                background: url(../images/ranking2.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        &:nth-of-type(3) .item-box .left-box {
            .sort {
                color: #9e6732;
            }
            .user-photo::after {
                display: block;
                content: "";
                position: absolute;
                width: 3rem;
                height: 2rem;
                top: -1rem;
                left: 50%;
                margin-left: -1.3rem;
                background: url(../images/ranking3.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

    }

    .item-box {
        @include flex-center-between();
        padding: .8rem 0;
        border-bottom: 1px solid #505050;

        .left-box {
            @include flex-center-start();

            .sort {
                width: 3rem;
                font-size: 3rem;
                font-family: "localFont";
                color: #6a6a6a;
            }

            .user-photo {
                position: relative;
                width: 3.4rem;
                height: 3.4rem;

                img {
                    border: .4rem solid #cdbc98;
                    border-radius: 50%;
                    width: 3rem;
                    height: 3rem;
                }
            }

            .name {
                margin-left: 1rem;
                font-size: 1.2rem;
                color: #c4c4c4;
            }
        }

        .right-box {
            @include flex-center-start();

            img {
                width: 1.6rem;
                height: 1.6rem;
            }

            .num {
                margin-left: .8rem;
                font-size: 2rem;
                font-family: "localFont";
            }
        }

    }
}